<template>
  <el-dialog :visible.sync="show" width="500px" title="授权角色" :modal-append-to-body='false' destroy-on-close>
    <div>
      <el-form class="ft14 color101">
        <div>
          <h3 class="mt-sm">{{ $t('management.userName')}}</h3>
          <el-input v-model="userName" disabled></el-input>
        </div>

        <div class="mt-lg">
          <h3 class="mt-sm">{{$t('authorization.userId')}}</h3>
          <el-input v-model="userId" disabled></el-input>
        </div>

        <el-form-item :label="$t('authorization.userRole')" class="mt-md">
          <ul class="role-list">
            <li v-for="item in roleLists" :key="item.id">
              <el-checkbox v-model="item.have" name="type" @change="handleChange(item.id,item.have)">
                {{item.name}}
              </el-checkbox>
            </li>
          </ul>
        </el-form-item>
      </el-form>
      <div slot="footer" class="text-right mt-lg">
        <el-button type="primary" @click="clickConfirm">{{ $t('authorization.authorize') }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        userName: '',
        userId: '',
        roleLists: []
      }
    },
    methods: {
      handleChange(val, have) {},
      getRoleList(item) {
        this.userId = item.id
        this.userName = item.username
        this.$get({
          url: '/user/role/0/' + item.id
        }).then(res => {
          this.roleLists = res;
        })
      },
      clickConfirm(){
        let roleArr = []
        this.roleLists.forEach((item) => {
          if (item.have) {
            roleArr.push(item.id)
          }
        })
        this.$get({
          url: '/user/authority/role',
          params: {
            roleIds: roleArr.join(','),
            uid: this.userId,
          }
        }).then(res => {
          this.$message({
            type: 'success',
            message: '用户授权成功'
          });
          this.show = false
          this.$parent.getList();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .role-content{
    width: 350px;
    margin: 0 auto;
    .role-list{
      padding-left: 50px;
    }
  }
</style>
